<template>
  <el-container class="app-container">
    <el-header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="base">
          <BaseInfo />
        </el-tab-pane>
        <el-tab-pane label="育儿顾问" name="saler">
          <SalerInfo :active="activeName"/>
        </el-tab-pane>
        <el-tab-pane label="课程订单" name="courseOrder">
          <CourseOrderInfo :active="activeName"/>
        </el-tab-pane>
        <el-tab-pane label="商城订单" name="mallOrder">
          <MallOrderInfo :active="activeName"/>
        </el-tab-pane>
        <el-tab-pane label="邀请记录" name="invitation">
          <InviteRecordInfo :active="activeName"/>
        </el-tab-pane>
        <el-tab-pane label="积分" name="integral">
          <BonusFlowInfo :active="activeName"/>
        </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main>
      <div class="order-statue">
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import BaseInfo from './components/BaseInfo'
  import SalerInfo from './components/SalerInfo'
  import CourseOrderInfo from './components/CourseOrderInfo'
  import MallOrderInfo from './components/MallOrderInfo'
  import BonusFlowInfo from './components/BonusFlowInfo'
  import InviteRecordInfo from './components/InviteRecordInfo'

  export default {
    name: 'detail',
    components:{
      BaseInfo,SalerInfo,CourseOrderInfo,MallOrderInfo,BonusFlowInfo,InviteRecordInfo
    },
    data() {
      return {
        activeName:"base"
      }
    },
    filters: {

    },
    methods: {
      handleClick(tab){
        this.activeName = tab.name
      },
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>

</style>
